<template>
	<view class="uni_box home">
		<image class="bghome" :src="ossThree('/uploads/20250404/a6740382ebb9492d9ed8c12c1e42d198.png')" />
		<view class="jli"  :style="{paddingTop: titleTop + 'px'}">
			<!-- <view class="immerse"></view> -->
			
			<view class="xiao">
				
				<view class="xone">
					<text class="jname">消息中心</text>
					<!-- <text class="yaojl">没有未读消息</text> -->
					<image class="icon_qcxx" src="/static/img/icon_qcxx.png" @click="getqingkong" />
				</view>
				
				<view class="yitwo">
					
					<view class="yileft" :class="type=='user'?'tzhi':''" @click="getxiao('user')">
						<image class="icon_tz" src="/static/img/icon_tz.png" />
						通知消息</view>
					<view class="yileft" :class="type=='system'?'xitong':''" @click="getxiao('system')">
						<image class="icon_tz" src="/static/img/icon_xt.png" />
						系统消息
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="list" v-for="(item,index) in list" :key="index">
				<view class="lone">
					<image class="icon_gg" v-if="type=='system'" src="/static/img/tzhi.png" />
					<image class="icon_gg" v-if="type=='user'" src="/static/img/icon_gg.png" />
					<text class="tname">{{type=='system'?'系统公告':'通知消息'}}</text>
					<text class="time">{{ item.createtime }}</text>
				</view>
				<text class="kaigong">{{ item.messagenotice.message_title }}</text>
				<view class="mshu">
					<text class="mshutit">{{ item.messagenotice.message_content }}</text>
					<!-- <image class="icon_next" src="/static/img/icon_next.png" /> -->
				</view>
			</view>
			<u-loadmore :status="status" @loadmore="loadmore" />
		</view>
</view>
</template>

<script>
export default {
	data() {
		return {
			enable: false,
			Captop: 0,
			offTop: 0,
			scrollLeft: 0,//滑动距离
			currentindex: 0,
			Themecolor:this.Themecolor,
			titleTop: 0,
 			statusBarHeight: 0,
			list: [],
			page: 1,
			limit: 10,
			last_page: 1,
			status: "loadmore",
			type:'user',//system 系统消息 user 通知消息
		}
	},
	components: {
	},
	mounted() {
		// #ifdef MP-WEIXIN
		let that = this;
		// 获取胶囊按钮位置信息
		const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		const { top, height } = menuButtonInfo;
		const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;

		// 计算标题需要偏移的位置
		const titleTop = top + (height - statusBarHeight) / 2;
		this.titleTop = titleTop;//设置标题顶部距离
		this.statusBarHeight = statusBarHeight;//设置状态栏高度
		// #endif
	},
	computed: {
	},
	onLoad() {

	},
	onShow() {
		this.getClear()
		// this.getinfo()
	},
	onReachBottom: function () {
		this.loadmore();
	},
	methods: {
		changeCate(index) {
			this.scrollLeft = 50 * (index - 1);
			this.currentindex = index
		},
		async getList(){//列表数据
			let res = await this.$u.api.getMessageList({
			  limit:this.limit,
				page:this.page,
				type:this.type
			});
				let list = res.data;
				this.list = this.page == 1 ? list : [...this.list, ...list];	
				if(res.list==''||Number(list.length)<Number(this.limit)){
					this.status = 'nomore';
				}
			},
			loadmore() {
				let page = this.page;
				// let last_page = this.last_page;
				if (this.status == 'loadmore') {
					this.page++;
					this.getList();
				}
			},
			getClear(){
				this.list = []
				this.page = 1,
				this.status= "loadmore"
				this.getList()
			},
			getxiao(e){
				this.type = e
				this.getClear()
			},
			getqingkong(){
				//退出登陆
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定清空消息？',
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "确认", // 确认按钮的文字  
					// showCancel: false, // 是否显示取消按钮，默认为 true
					// confirmColor: '#f55850',
					// cancelColor: '#39B54A',
					success: (res) => {
					if(res.confirm) {  
						that.deltwo()
					} else {  
						console.log('cancel') //点击取消之后执行的代码
						}  
					} 
				})
			},
			async deltwo(){
				let res = await this.$u.api.deletedMessageAll({
				});
				this.$u.toast("操作成功");
				this.getClear()
			},
			
		},
		
}
</script>

<style lang="scss" scoped>
page {
	background-color: rgba(245, 245, 245, 1);
}

.bghome{
	position: absolute;
	width: 100%;
	height: 480rpx;
}
.content {
	position: relative;
	// padding-bottom: 120rpx;
	padding: 0 30rpx 120rpx;
	// background-color: rgba(245, 245, 245, 1);

	.souviewnew {
		margin: 0 0 0rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #fff;
		// height: 90rpx;
		padding: 0rpx 20rpx 20rpx;
		.souleft{
			width: 70%;
			display: flex;
			white-space: nowrap;
			.tuiview{
				display: inline-block;
				padding: 15rpx 30rpx;
				background: #EEEEEE;
				border-radius: 10rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #51565D;
				text-align: center;
				margin-right: 15rpx;
			}
			.tactive{
				background: $Themecolor;
				color: #fff;
			}
		}


		.shaixuan {
			margin-left: auto;
			width: 100rpx;
			height: 60rpx;
			background: #EEEEEE;
			border-radius: 10rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;

			.icon_ss {
				width: 12rpx;
				height: 12rpx;
				margin-left: 15rpx;
			}

			text {
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #51565D;
			}
		}
	}

	
}

.hleft {
	position: absolute;
	left: 10px;
	font-size: 35rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #FFFFFF;
}

.nodata {
	width: 100%;
	padding-top: 30rpx;
}

.meiyuan {
	font-size: 35rpx;
	position: relative;
	top: -1px;
}

.meiyuantwo {
	font-size: 22rpx;
	position: relative;
	top: -1px;
}
.jli{
	// height: 301rpx;
	// background: linear-gradient(90deg, #FF8F39, #FF4D43);
	// padding-top: var(--status-bar-height);
	// padding:0 30rpx;
	position: relative;
	.jname{
		font-weight: 800;
		font-size: 45rpx;
		color: #111111;
		padding-top: 20rpx;
		display: flex;
		margin-bottom: 20rpx;
	}
	.icon_qcxx{
		margin-left: 20rpx;
		width: 44rpx;
		height: 44rpx;
	}
	.xone{
		display: flex;
		margin-bottom: 30rpx;
		align-items: center;
	}
	.yaojl{
		font-weight: 400;
		font-size: 26rpx;
		color: #999999;;
	}
	.yitwo{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 20rpx;
		.yileft{
			width: 48%;
			height: 78rpx;
			background-color: #999;
			// background: linear-gradient(34deg, #DC5585, #FD79AA);
			border-radius: 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;

		}
		.tzhi{
			background: linear-gradient(34deg, #DC5585, #FD79AA);
		}
		.xitong{
			background: linear-gradient(34deg, #3A76D7, #5E98E8);
		}
		.icon_tz{
			width: 44rpx;
			height: 44rpx;
			margin-right: 5rpx;
		}
	}
	.xiao{
		position: relative;
		padding:0 30rpx 30rpx;
	}
}
// .content{
// 	padding: 0 30rpx;
// }
.list{
	background: #FFFFFF;
	border-radius: 30rpx;
	padding: 30rpx;
	margin-bottom: 24rpx;
	.lone{
		display: flex;
		flex-direction: row;
		align-items: center;
		.icon_gg{
			margin-right: 12rpx;
			width: 60rpx;
			height: 60rpx;
		}
		.tname{
			font-weight: bold;
			font-size: 32rpx;
			color: #111111;
		}
		.time{
			margin-left: auto;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
		}
	}
	.kaigong{
		font-weight: bold;
		font-size: 28rpx;
		color: #111111;
		display: block;
		margin: 20rpx 0 10rpx;
	}
	.mshu{
		display: flex;
		flex-direction: row;
		align-items: center;

		.mshutit{
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
		}
		.icon_next{
			margin-left: auto;
			width: 24rpx;
			height: 24rpx;
		}
	}

}
</style>
